<template>
  <div>
    <!-- 分配权限的弹层 -->
    <el-dialog
      title="分配权限(一级为路由页面查看权限-二级为按钮操作权限)"
      :visible="showAssignDialog"
      @close="closeDialog"
      @open="openDialog"
    >
      <!-- 权限点数据展示 -->
      <el-tree
        ref="tree"
        node-key="id"
        :data="permissionList"
        :props="{ label: 'name' }"
        :check-strictly="true"
        show-checkbox
        default-expand-all
      />
      <template #footer>
        <div style="text-align: right">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionList } from '@/api/permission'
import { transTreeData } from '@/utils/transTreeData'
import { assignPerm, getRoleDetailById } from '@/api/setting'
export default {
  props: {
    showAssignDialog: {
      type: Boolean
    },
    curRoleId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      permissionList: [] // 可选权限列表
    }
  },
  methods: {
    async loadPermissionList() {
      const res = await getPermissionList()
      this.permissionList = transTreeData(res.data)
    },
    async loadPermissionDetail() {
      const res = await getRoleDetailById({ id: this.curRoleId })
      // 回显操作
      this.$refs.tree.setCheckedKeys(res.data.permIds)
    },
    // 关闭
    closeDialog() {
      this.$emit('close-dialog')
    },
    openDialog() {
      this.loadPermissionList()
      this.loadPermissionDetail()
    },
    async confirm() {
      await assignPerm({
        id: this.curRoleId,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      this.$message({
        type: 'success',
        message: '分配权限点成功'
      })
      this.closeDialog()
    }
  }
}
</script>

<style>
</style>
